<template>
  <div class="app-container">
    <!-- Header 区域 -->
    <my-header title="购物车案例"></my-header>

    <!-- 商品 Item 项组件 -->
    <my-goods 
      :id="1" 
      :title="'标题'" 
      :thumb="'./assets/logo.png'" 
      :price="99" 
      :count="3" 
      :state="true"
      ></my-goods>

    <!-- Foote 区域 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyFooter from './components/MyFooter.vue'
import MyGoods from './components/MyGoods.vue'

export default {
  name: 'App',
  components: {
    MyHeader,
    MyFooter,
    MyGoods,
  },
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 46px 0 50px 0;
}
</style>